<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <style>
    #_time{
      font-size: large;
    }
  </style>
    <meta charset="UTF-8">
    <title>交易确认</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<div id="app">
  <el-card shadow="hover" style="width: 50%; margin-top: 40px;">
    <div slot="header" class="clearfix">
      <span>正在查询支付结果，请稍等...</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">我已支付直接跳转</el-button>
    </div>
    <div id="_time" style="margin-top: 40px;">
      <el-statistic
              ref="statistic"
              @finish="hilarity"
              format="mm:ss"
              :value="deadline"
              title="交易正在查询中"
              time-indices
      >
      </el-statistic>
    </div>

  </el-card>
</div>
<script th:inline="javascript">
  var app = new Vue({
    el: "#app",
    data: {
      deadline: Date.now() + 1000 * 10,
      stop: true,
      payInfo:[[${payInfo}]]
    },
    methods: {
      initQueryPay(){
        if (this.payInfo != null){
          let orderid = this.payInfo.out_trade_no;
          $.post("/order/pay",{orderId:orderid,states:3},function (data){
            if (data==="ok"){
              location.href="/homeh.html"
            }
          })
        }else{
          // $.post("/queryPay",{WIDTQout_trade_no:orderid},function (data){
          //   if (data != null){
          //     location.href="/homeh.html"
          //   }else {
          //     alert("未查询到支付结果!")
          //   }
          // })
        }
      }
      ,
      hilarity() {
        this.$notify({
          title: '提示',
          message: '暂未查询到有效信息，请关注支付是否成功',
          duration: 0,
        });
        location.href="/homeh.html"
      },
      clickFn() {
        this.$refs.statistic.suspend(this.stop);
        this.stop = !this.stop;
        if (this.payInfo != null){
          let orderid = this.payInfo.out_trade_no;
          $.post("/order/pay",{orderId:orderid,states:1},function (data){
            if (data==="ok"){
              location.href="/homeh.html"
            }
          })
        }else {
          location.href="/payFail.html"
        }
      }
    }
    ,
    created(){
      this.initQueryPay();
    }
  });
</script>
</body>
</html>